<template>
   <div>
     <h1>计数器</h1>
     <h2>{{$store.state.counter.num}}</h2>
     <h3>{{$store.getters["counter/doubleNum"]}}</h3>
     <button @click="updateNum">更新</button>
      <button @click="updateNumAsync">异步更新</button>
   </div>
</template>

<script>
/* 
    vuex的模块化的实现步骤
    1、在store/modules文件夹下创建xx.js文件,创建的文件格式如下所示
    export default{
        namespaced:true,//必须的
        state:{},
        mutations:{},
        actions:{},
        getters;{}
    }
    2、在store/index.js文件中，通过modules属性来进行引入
    const store=new Vuex.Store({
        modules:{
            xx:模块对象
        }
    })
    3、组件使用
    1）$store方法引入模块
    1.1）使用state:this.$store.state.模块名.state的变量名
    1.2) 使用mutaions:this.$store.commit("模块名/mutations中的方法",传递的参数)
    1.3)使用actions：this.$store.dispath("模块名/actions中的方法",传递的参数)
    1.4）使用getters:this.$store.getters["模块名/getters的方法名"]
*/
export default {
    created(){
        console.log(this.$store);
    },
    methods:{
        updateNum(){
            this.$store.commit('counter/SET_NUM',1)
        },
        updateNumAsync(){
            this.$store.dispatch("counter/incrementAsync",2)
        }
    }

}
</script>

<style>

</style>